import React, {useEffect, useState, forwardRef, useImperativeHandle} from 'react';
import PageModule from '@/components/PageModule.tsx'
import SelectCustomer from '@/views/policyManagement/car/SelectCustomer.tsx'
import {Row, Form} from "antd";
import CycleForm from "@/components/DynamicSearchForm/CycleForm.tsx";
import {getDicOnCode} from "@/utils/dicAll.ts";
import {nameOfPeople, nameOfPeople2, validateIdCard, verificationOfFixedPhoneNumber} from "@/utils/regular.ts";

const InsureInfo = forwardRef((props, ref) => {
    let {carInsureInfo, setValue, policyDisabled} = props
    useImperativeHandle(ref, () => ({
        verifyTheForm: () => {
            return new Promise((resolve, reject) => {
                InsureForm.validateFields().then((values) => {
                    let obj = lodash.cloneDeep(values)
                    obj = {...obj, ...obj.addressPart}
                    delete obj.addressPart
                    resolve(obj)
                }).catch((err) => {
                    reject({})
                })
            })
        }
    }))
    let [InsureForm] = Form.useForm()
    let [formFields, setFormFields] = useState([
        {
            type: 'input',
            name: 'insurerName',
            label: '投保人名称',
            rules: [{required: true, message: '请输入投保人名称'}, {validator: nameOfPeople}]
        },
        {
            type: 'select',
            name: 'certiType',
            label: '证件类型',
            options: getDicOnCode("PRODUCT.IDCARDTYPE"),
            rules: [{required: true, message: '请选择证件类型'}]
        },
        {
            type: 'input',
            name: 'contactName',
            label: '联系人姓名',
            rules: [{required: true, message: '请输入联系人姓名'}, {validator: nameOfPeople2}]
        },
        {
            type: 'select',
            name: 'countryCode',
            label: '国别',
            options: getDicOnCode("PRODUCT.ALLTRUST_COUNTRY"),
            disabled: true,
        },
        {
            type: 'input',
            name: 'certiNo',
            label: '证件号码',
            dependencies: ['certiType'],
            rules: [
                {required: true, message: '请输入证件号码'},
                {min: 7, message: '请输入证件号码至少7个字符'},
                ({getFieldValue}) => ({
                    validator(_, value) {
                        const Type = getFieldValue('certiType')
                        if (!Type) {
                            return Promise.resolve()
                        }
                        if (Type === '1') {
                            return validateIdCard(value)
                        }
                    },
                })
            ]
        },
        {
            type: 'input',
            name: 'phone',
            label: '请输入联系人电话',
            rules: [{required: true, message: '请输入联系人电话'}, {validator: verificationOfFixedPhoneNumber}]
        },
        {
            type: 'AddressPart',
            name: 'addressPart',
            label: '所在省市区/县',
            span: 16,
            labelCol: {span: 3},
            rules: [{required: true, message: '所在省市区/县'}],
        },
        {
            type: 'TextArea',
            name: 'address',
            label: '通讯地址',
            pull: 6,
            span: 24,
            rules: [{required: true, message: '请输入通讯地址'}]
        },
    ])
    useEffect(() => {
        if (carInsureInfo) {
            if (carInsureInfo.provinceCode || carInsureInfo.cityCode || carInsureInfo.regionCode) {
                carInsureInfo.addressPart = {
                    provinceCode: carInsureInfo.provinceCode,
                    provinceName: carInsureInfo.provinceName,
                    cityCode: carInsureInfo.cityCode,
                    cityName: carInsureInfo.cityName,
                    regionCode: carInsureInfo.regionCode,
                    regionName: carInsureInfo.regionName
                }
            }
            // AddressPart
            InsureForm.setFieldsValue(carInsureInfo)
        }
    }, [carInsureInfo]);
    // 关键监听属性
    const handleValuesChange = lodash.debounce((_:object, allValues: object)=>{
        setValue(allValues)
    }, 500)
    return (
        <PageModule title="投保人信息" btns={!policyDisabled?<SelectCustomer onSure={(item) => {
            InsureForm.setFieldsValue({
                insurerName: item.custName || undefined,
                certiType: item.certiType || undefined,
                contactName: item.contactName || undefined,
                countryCode: item.countryCode || '008zg',
                certiNo: item.certiNo || undefined,
                phone: item.phone || undefined,
                address: item.address || undefined,
                addressPart: {
                    provinceCode: item.provinceCode || undefined,
                    provinceName: item.provinceName || undefined,
                    cityCode: item.cityCode || undefined,
                    cityName: item.cityName || undefined,
                    regionCode: item.regionCode || undefined,
                    regionName: item.regionName || undefined,
                }
            })
            handleValuesChange({}, InsureForm.getFieldsValue())
        }} />:null}>
            <Form
                layout="horizontal"
                autoComplete="off"
                labelCol={{span: 8}}
                wrapperCol={{span: 16}}
                form={InsureForm}
                initialValues={
                    {countryCode: '008zg'}
                }
                onValuesChange={handleValuesChange}
                disabled={policyDisabled}
            >
                <Row>
                    <CycleForm fields={formFields} />
                </Row>
            </Form>
        </PageModule>
    );
})

export default InsureInfo;